import React from "react";

/**
 * 组件卸载阶段，要执行的钩子函数
 *
 * componentWillUnmount
 */
class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("1. constructor()");
    // 设置组件状态
    this.state = {
      count: 0,
    };
    // const title = document.getElementById('title')
    // console.log('DOM 操作', title)
  }

  componentDidMount() {
    console.log("3. componentDidMount()");
    // 1. 发送ajax请求。

    // 2. DOM 操作
    // const title = document.getElementById('title')
    // console.log('DOM 操作', title)
  }

  handleClick = () => {
    // 修改组件状态
    this.setState({
      count: this.state.count + 1,
    });
  };

  componentDidUpdate() {
    console.log("4. componentDidUpdate()");
  }

  render() {
    console.log("2. render");
    return (
      <div>
        {/* <h1 id='title'>父组件内容，按钮被点击次数：{this.state.count}</h1> */}
        <h1 id="title">父组件</h1>
        <button onClick={this.handleClick}>点击</button>
        <hr/>
        {this.state.count > 3 ? (
          <div></div>
        ) : (
          <Counter count={this.state.count} />
        )}

      </div>
    );
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    console.log("子组件 1. constructor()");
    // this.timerId = setInterval(()=> {
    //     console.log('子组件计时器执行'+props.count)
    // }, 500)
  }

  render() {
    console.log("子组件 2. render");
    return (
      <div>
        <h3>子组件内容：{this.props.count}</h3>
      </div>
    );
  }

  componentDidMount() {
    console.log("子组件 3. componentDidMount()");
  }

  componentDidUpdate() {
    console.log("子组件 4. componentDidUpdate()");
  }

  componentWillUnmount() {
    // clearInterval(this.timerId)
    console.log("子组件 5. componentWillUnmount()");
  }

}

export default App;
